<template>
    <div class="crumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <template v-for="(item, index) in breadList">
                <el-breadcrumb-item v-if="item.meta.parent" :key="item.meta.parent">{{ item.meta.parent }}</el-breadcrumb-item>
                <el-breadcrumb-item :key="index">{{ item.meta.title }}</el-breadcrumb-item>
            </template>
        </el-breadcrumb>
    </div>
</template>
<script>
export default {
    data() {
        return {
            breadList: [], // 路由集合
        }
    },
    watch: {
        $route() {
            this.getBreadcrumb()
        },
    },
    methods: {
        isHome(route) {
            return route.name === "home"
        },
        getBreadcrumb() {
            let matched = this.$route.matched
            matched.shift()
            this.breadList = matched
        },
    },
    created() {
        this.getBreadcrumb()
    },
}
</script>
<style lang="scss">
.crumb {
    padding-left: 10px;
    height: 40px;
    width: 100%;
    .el-breadcrumb {
        height: 40px;
        line-height: 40px;
    }
}
</style>
